<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Dialog</title>
	<script data-ui5-config type="application/json">
		{
			"language": "EN"
		}
	</script>
	<script>
		// delete Document.prototype.adoptedStyleSheets
	</script>
	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
	<script src="https://sapui5untested.int.sap.eu2.hana.ondemand.com/resources/sap-ui-core.js"
			id="sap-ui-bootstrap"
			data-sap-ui-libs="sap.m"
			data-sap-ui-oninit="onOpenUI5Init"
			data-sap-ui-compatVersion="edge"></script>
	<script>
		function onOpenUI5Init() {
			sap.ui.require(["sap/ui/core/HTML", "sap/m/Button", "sap/m/Dialog", "sap/m/Input"], (HTML, Button, Dialog, Input) => {
				new Button("openUI5Button", {
					text: "Open OpenUI5 Dialog",
					press: function () {
						new Dialog("openUI5Dialog", {
							title: "OpenUI5 Dialog",
							content: [
								new HTML({
									content:
`<div>Web Components:<div>
<ui5-select id="webCSelect1">
	<ui5-option>Option 1</ui5-option>
	<ui5-option>Option 2</ui5-option>
	<ui5-option>Option 3</ui5-option>
	<ui5-option>Option 4</ui5-option>
	<ui5-option>Option 5</ui5-option>
</ui5-select>
<ui5-combobox id="webCComboBox1">
	<ui5-cb-item text="Algeria"></ui5-cb-item>
	<ui5-cb-item text="Argentina"></ui5-cb-item>
	<ui5-cb-item text="Australia"></ui5-cb-item>
</ui5-combobox>
<ui5-button>WebC Button</ui5-button>
<br><br>
<div>OpenUI5 Controls:</div>`
								}),
								new Input(),
								new Button({
									text: "Focus stop"
								}),
								new Button("openResPopoverButton", {
									text: "Open WebC Responsive Popover",
									press: function () {
										document.getElementById("respPopover").open = true;
									}
								}),
								new Button("openResPopoverNoInitialFocusButton", {
									text: "Open WebC RP with NO Initial Focus",
									press: function () {
										document.getElementById("respPopoverNoInitialFocus").open = true;
									}
								})
							],
							afterClose: function () {
								this.destroy();
							}
						}).open();
					}
				}).placeAt("content");
			});

			document.getElementById("myButton").addEventListener("click", function() {
				document.getElementById("dialog1").open = true;
			});

			sap.ui.require(["sap/m/Select",
					"sap/m/ComboBox",
					"sap/m/Button",
					"sap/ui/core/Item",
					"sap/ui/core/ShortcutHintsMixin"],
				(Select,
				 ComboBox,
				 Button,
				 Item,
				 ShortcutHintsMixin) => {
					new Select("openUI5Select1", {
						items: [
							new Item({ text: "Item 1" }),
							new Item({ text: "Item 2" }),
							new Item({ text: "Item 3" })
						],
						change: function (oEvent) {
							console.error("Selected item:", oEvent.getParameter("selectedItem").getText());
						}
					}).placeAt("dialog1content");

					new ComboBox("openUI5Combobox1", {
						items: [
							new Item({ text: "Item 1" }),
							new Item({ text: "Item 2" }),
							new Item({ text: "Item 3" })
						]
					}).placeAt("dialog1content");

					const button = new Button({
						text: "OpenUI5 with Shortcut (Ctrl+S)",
						press: function () {
							openUI5Dialog();
						}
					}).placeAt("dialog1content");


					ShortcutHintsMixin.addConfig(button, {
						event: "press",
						position: "0 0",
						addAccessibilityLabel: true,
						message: "Save"
					}, button);
				});

			document.getElementById("dialogButton").addEventListener("click", function () {
				openUI5Dialog();
			});

			document.getElementById("popoverButtonNoFocus").addEventListener("click", function (event) {
				openUI5Popover(event.target);
			});
		}

		function openUI5Dialog() {
			sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
				new Dialog("openUI5DialogWithButtons", {
					title: "OpenUI5 Dialog",
					content: [
						new Button({
							text: "Focus stop"
						}),
						new Button("openUI5DialogButton", {
							text: "Open WebC Dialog",
							press: function () {
								document.getElementById("newDialog1").open = true;
							}
						})
					],
					afterClose: function () {
						this.destroy();
					}
				}).open();
			});
		}

		function openUI5Popover(opener) {
			sap.ui.require(["sap/m/Popover", "sap/m/Button"], (Popover, Button) => {
				new Popover("openUI5PopoverSecond", {
					title: "OpenUI5 Popover",
					content: [
						new Button("someButton", {
							text: "Open new OpenUI5 Popover",
							press: function (oEvent) {
								new Popover({
									title: "New OpenUI5 Popover",
									placement: "Bottom",
									content: [
										new Button({
											text: "Focus stop"
										})
									],
									initialFocus: "someButton",
									afterClose: function () {
										this.destroy();
									}
								}).openBy(oEvent.getSource());
							}
						})
					],
					initialFocus: "popoverButtonNoFocus",
					afterClose: function () {
						this.destroy();
					}
				}).openBy(opener);
			});
		}
	</script>
</head>
<body class="sapUiBody">
	<div id="buttonP">
		<ui5-button id="myButton">Open WebC Dialog</ui5-button>
	</div>
	<ui5-dialog id="dialog1" header-text="This is an WebC Dialog 1">
		<div id="dialog1content"></div>
		<br >
		Web Components:
		<br >
		<ui5-select>
			<ui5-option>Option 1</ui5-option>
			<ui5-option>Option 2</ui5-option>
			<ui5-option>Option 3</ui5-option>
			<ui5-option>Option 4</ui5-option>
			<ui5-option>Option 5</ui5-option>
		</ui5-select>
		<ui5-combobox>
			<ui5-cb-item text="Algeria"></ui5-cb-item>
			<ui5-cb-item text="Argentina"></ui5-cb-item>
			<ui5-cb-item text="Australia"></ui5-cb-item>
		</ui5-combobox>
		<br >
		<br >
		<ui5-button id="dialogButton">Open UI5 dialog</ui5-button>
		<ui5-button id="popoverButtonNoFocus">Open UI5 Popover No Initial Focus</ui5-button>
	</ui5-dialog>
	<ui5-dialog id="newDialog1" header-text="This is an WebC Dialog 2">
		<ui5-button id="someButton">Some button</ui5-button>
	</ui5-dialog>
	<div id="content"></div>
	<ui5-responsive-popover id="respPopover"
							opener="openResPopoverButton"
							header-text="This is an WebC Responsive Popover">
		<ui5-button>Some button</ui5-button>
	</ui5-responsive-popover>
	<ui5-responsive-popover id="respPopoverNoInitialFocus"
							prevent-initial-focus
							opener="openResPopoverNoInitialFocusButton"
							header-text="This is an WebC RP with no initial focus">
		<ui5-button>Some button</ui5-button>
	</ui5-responsive-popover>

	<ui5-combobox>
		<ui5-cb-item text="Algeria"></ui5-cb-item>
		<ui5-cb-item text="Argentina"></ui5-cb-item>
		<ui5-cb-item text="Australia"></ui5-cb-item>
	</ui5-combobox>
</body>
</html>
